<template>
	<view>
		<view class="pages">


			<view class="topboxes">
				<view class="tops1">
					<img class="img " src="../../../static/img/a1.jpg" />
					<view @click="go1" class="sub">
						<img class="hand" src="../../../static/img/20.png" alt="">
					</view>
				</view>
				<img class="img bg1" src="../../../static/img/b1.jpg" />
				<img class="img bg1" src="../../../static/img/c1.jpg" />
				<img class="img bg1" src="../../../static/img/d1.jpg" />
			</view>
			<view class="tit product-reviews">
				小猫健康
			</view>
			<view class="lists">

				<view @click="go('1')" class="item2">
					<view class="name">
						小猫健康
					</view>
					<view class="price">
						<i>399元</i>
					</view>
					<view class="subtit">
						瑞享延年优护卡
					</view>
					<view class="type">
						个人版
					</view>
					<view class="vip">
						vip
					</view>
				</view>
				<view @click="go('2')" class="item2 dif">
					<view class="name">
						小猫健康
					</view>
					<view class="price">
						<i>799元</i>
					</view>
					<view class="subtit">
						瑞享延年优护卡
					</view>
					<view class="type">
						家庭版
					</view>
					<view class="vip">
						vip
					</view>
				</view>
			</view>
		</view>
		<view class="quanyi">
			<view class="title1">
				专属权益
			</view>
			<view class="detail">

			</view>
		</view>
		<view class="icons">
			<view class="item">
				<view class="icon">
					<image src="../../../static/img/ABUIABAEGAAgjqWTuQYotID0yAQw6Ac46Ac.png" mode=""></image>
				</view>
				<view class="intro">
					专属会员卡
				</view>
			</view>
			<view class="item">
				<view class="icon">
					<image src="../../../static/img/ABUIABAEGAAgjaWTuQYoiryDkQcw6Ac46Ac.png" mode=""></image>
				</view>
				<view class="intro">
					12小时在线客服
				</view>
			</view>
		</view>
		<foo />

	</view>
</template>

<script>
	import foo from "../msg/footer.vue";
	export default {
		components: {
			foo
		},
		data() {
			return {
				parm: ''
			}
		},
		onLoad(e) {


			this.parm = e.parm

		},
		methods: {

			go1() {
				uni.createSelectorQuery().select('.product-reviews').boundingClientRect((rect) => {
					console.log(rect.top)
					if (rect) {
						uni.pageScrollTo({
							scrollTop: rect.top,
							duration: 300
						});
					}
				}).exec();
			},
			go(type) {
				uni.reLaunch({
					url: '/pages/sys/msg/index?type=' + type + '&parm=' + this.parm
				})
			}
		}
	}
</script>


<style scoped lang="scss">
	.topboxes {
		a {
			color: #333;
			text-decoration: none;
		}

		.btns {
			box-shadow: 2px 2px 9px #d5d5d5;
			margin-bottom: 50px;
			border-radius: 30px;
			height: 50px;
			background: #fbdb8d;
			margin: 0 20px;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #b05622;
			// font-weight: 600;
			font-size: 23px;


		}

		p {
			padding: 15px 10px;

			span {
				color: rgb(216, 27, 67);
			}
		}

		.img {
			display: block;
			width: 100%;
			height: auto;
		}

		.tops1 {
			position: relative;
			overflow: hidden;
			// width: 750rpx;
			// height: 1196rpx;
			// background: url("../../../static/img/a.jpg") no-repeat;
			// background-size: cover;

			.sub {
				position: absolute;
				bottom: 50px;
				left: 50%;
				margin-left: -294rpx;
				border-radius: 30px;
				cursor: pointer;
				width: 588rpx;
				height: 141rpx;
				background: url("../../../static/img/btn.jpg") no-repeat;
				background-size: cover;

				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				// line-height: 108rpx;
				align-items: center;
				justify-content: center;


				.hand {
					position: absolute;
					bottom: 0px;
					right: 15px;
					width: 100rpx;
					display: block;
					-webkit-animation: hand 0.9s ease-in-out infinite;
					animation: hand 0.9s ease-in-out infinite;
				}

				@keyframes hand {
					0% {
						-webkit-transform: translate(10px, 26px) rotate(-20deg);
						transform: translate(10px, 20px) rotate(-20deg);
					}

					50% {
						-webkit-transform: translate(-28px, 0) rotate(-20deg);
						transform: translate(-28px, 0) rotate(-20deg);
					}

					100% {
						-webkit-transform: translate(10px, 26px) rotate(-20deg);
						transform: translate(10px, 20px) rotate(-20deg);
					}
				}

			}

		}
	}

	.quanyi {
		padding: 20px 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title1 {
			padding: 0 30rpx;
			color: #333;
			font-size: 14px;
			font-weight: 700;



		}

		.detail {
			display: flex;
			align-items: center;
		}
	}

	.icons {
		display: flex;
		align-items: center;
		margin: 0 30rpx 20px;

		.item {
			margin-right: 30px;

			.intro {
				margin: 10px 0 0;

			}

			.icon {

				margin: 0 auto;
				border: 1px solid #c7a34c;
				border-radius: 50%;
				height: 52px;
				overflow: hidden;
				border-radius: 50%;
				width: 52px;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 25px;
					height: 25px;
				}
			}
		}
	}

	.pages {
		padding: 0 0 10px;
		// min-height: 100vh;
		// overflow-y: auto;
		// background: linear-gradient(#12b0f8, #4283eb);

		background: #f7f7f7;

		.tit {
			font-size: 18px;
			text-align: center;
			color: #333;
			padding: 20px 0;
			font-weight: bold;
		}
	}

	.lists {
		padding: 0 30rpx;

		.item2 {
			box-shadow: 1px 3px 5px rgba(144, 144, 144, 0.4);
			position: relative;
			margin: 0 auto 15px;
			width: 100%;
			height: 193px;
			border-radius: 10px;
			background: url('../../../static/img/1.jpg') no-repeat;
			background-size: 100% 100%;

			.name {
				color: rgb(255, 235, 60);
				position: absolute;
				left: 20px;
				top: 18px;
				font-weight: 900;
				font-size: 16px;
			}

			.price {
				color: rgb(255, 235, 60);
				position: absolute;
				left: 20px;
				bottom: 20px;
				font-weight: 550;
				font-size: 25px;
			}

			.subtit {
				color: #008781;
				position: absolute;
				left: 130px;
				top: 40px;
				font-size: 24px;
				font-weight: 600;
			}

			.type {
				color: #4d4d4d;
				position: absolute;
				left: 130px;
				top: 80px;
				font-size: 16px;
				font-weight: 600;
			}

			.vip {
				color: rgb(255, 235, 60);
				position: absolute;
				right: 20px;
				bottom: 30px;
				font-size: 16px;
				font-weight: bold;
			}

			&.dif {
				.subtit {
					color: rgb(73, 110, 232);
				}

				.type {
					color: rgb(73, 110, 232);
				}
			}
		}
	}
</style>
